<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <form>
        <div class="form-group">
          <div class="test">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
          v-model="userName">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
        </div>
        <div class="form-group">
          <div class="test">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1"
          v-model="password">
          </div>
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary" @click="test1">Submit</button>
        <router-link to="/about">about</router-link>
      </form>
  </div>
</template>

<script>
import axios from "../common/axios"
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    
  },
  data() {
    return {
       userName: "",
       password: "",
    }
  },
  mounted() {
  },
  methods: {
    test1:function(){
          axios.post("http://localhost:8082/test/simpleTest"
            ,{
                data:this.userName,
                test:this.password
            })
            .then(
                (Response)=>{
                    console.log(Response)
                    console.log(Response.data)
                    this.test=Response.data
                }
            )
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    /* .test{
      width: 60%;
      position: relative;
      left: 420px;
    } */
</style>
